<template>
    <div>
        <navbar></navbar>
        <van-form @submit="onSubmit">
            <div style="text-align:center">
                <img :src="require('@/assets/logo.png')" />
            </div>
        <van-field
            v-model="userName"
            name="用户名"
            label="用户名"
            placeholder="用户名"
            :error-message="unmsg"
        />
        <van-field
            v-model="password"
            type="password"
            name="密码"
            label="密码"
            placeholder="密码"
            :error-message="pwmsg"
        />
        <div style="margin: 16px;">
            <van-button round block type="info" native-type="submit" :disabled="isDisabled" :loading="isLoding" :loading-text="lodingtext">登入</van-button>
        </div>
        </van-form>
        <div style="height:60px;width:100%"></div>
        <div style="margin:0 auto;text-align:center;width:100%">
            <div style="margin:0 auto;text-align:center;width:95%">
                <van-button round block plain hairline type="danger" to="/StaffManager/Regist/Regist">立即注册</van-button>
            </div>
        </div>
    </div>
</template>
<script>
import TokenCache from '@/utils/cache/TokenCache'
import navbar from '@/components/utils/navbar/m-navbar'
export default {
    components:{
        'navbar':navbar,
    },
    data() {
        return {
        userName: '',
        password: '',
        unmsg:'',
        pwmsg:'',
        isDisabled:true,
        unIsPass:false,
        pwIspass:false,
        isLoding:false,
        lodingtext:"",
        };
    },
    created(){
       this.setButton();
    },
    methods: {
        setButton(){
            if(this.unIsPass && this.pwIspass){
                this.isDisabled=false;
            }
        },
        onSubmit(values) {
            let _this = this;
            this.isLoding=true;
            this.lodingtext="正在登入...."
            this.$http.post('/Base_Manage/Home/SubmitLogin', values).then(resJson => {
                _this.isLoding = false;
                _this.lodingtext="";
                if (resJson.Success) {
                TokenCache.setToken(resJson.Data)
                //保存密码
                if (values['savePwd']) {
                    localStorage.setItem('userName', values['userName'])
                    localStorage.setItem('password', values['password'])
                } else {
                    localStorage.removeItem('userName')
                    localStorage.removeItem('password')
                }
                _this.$router.push({ path: '/' })
                } else {
                _this.$message.error(resJson.Msg)
                }
          })
        },
        onLogin(){
            console.log('onLogin',this.userName+"     "+this.password);
        }
    },
    watch:{
        userName(){
            var reg = /^(?!_)(?!.*?_$)[a-zA-Z0-9_\u4e00-\u9fa5]{6,15}$/;
            this.unIsPass=false;
            if(this.userName.length == 0){
                this.unmsg="用户名不能为空";
                return;
            }
            if(reg.test(this.userName)){
                this.unmsg="";
                this.unIsPass=true;
                this.setButton();
                return;
            }
            this.unmsg="用户名格式不正确";
        },
        password(){
            this.pwIspass=false;
            var reg = /^(?![a-zA-z]+$)(?!\d+$)(?![!@#$%^&*.,]+$)(?![a-zA-z\d]+$)(?![a-zA-z!@#$%^&*.,]+$)(?![\d!@#$%^&*.,]+$)[a-zA-Z\d!@#$%^&*.,]{6,18}$/;
            if(this.password.length == 0){
                this.pwmsg="密码不能为空";
                return;
            }
            if(reg.test(this.password)){
                this.pwmsg="";
                this.pwIspass=true;
                this.setButton();
                return;
            }
            this.pwmsg="密码格式不正确";
        }
    }
};
</script>